<script setup>
import {onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useClassStore} from "@/stores/useClassStore.js";
import {addClass, deleteClass, getClass, getStudents, setClass} from "@/api/Classes.js";
/* import {useUserStore} from "@/stores/useUSerStore.js";
 */
const detailAvailable =ref(false)//用于判断信息窗口是否弹出
const changeAble =ref(false)//用于判断是否可以用于修改数据
const addAble =ref(false)//用于判断是否用于添加，还是用于修改
const idAble= ref(false)
const addForm=reactive({
  groupId:"",//班号
  name:"",//班名
  grade:"",//年级
})

const reset =()=>{
  pageForm.name=""
  pageForm.groupId=""
  getPlus()
}
const pageForm =reactive({
  pageNum:1,
  pageSize:5,
  name:'',
  groupId:'',
  total:0
})


const getPlus =()=>{
  let message ={pageNum:pageForm.pageNum,pageSize:pageForm.pageSize}
  if (pageForm.name !=="")
    message['name']=pageForm.name
  if (pageForm.groupId !=="")
    message["groupId"] =pageForm.groupId
  getClass(message).then(res=>{
    useClassStore().setClasses(res.data.items)
    pageForm.total=res.data.total
  })
}

const addClasses =()=>{
  detailAvailable.value=true
  changeAble.value=true
  idAble.value=false
  addAble.value=true
  addForm.groupId=""
  addForm.name=""
  addForm.grade=""
}
const addConfirm =()=>{
  addClass(addForm).then((res)=>{
    if (res.code==0)
    {
      ElMessage.success("添加班级成功")
      detailAvailable.value=false
      getPlus()
    }
    else ElMessage.error("添加失败，网络波动，请稍后添加")
  })
}
const searchDetail =(item)=>{
  //根据Id得到具体班级信息
  detailAvailable.value=true
  changeAble.value=false
  idAble.value=true
  addForm.groupId=item.groupId
  addForm.name=item.name
  addForm.grade=item.grade
  getStudents(item.name).then((res)=>{
    console.log(res.data)
    useClassStore().setStudents(res.data.students)
  })
}
const removeClass =(item)=>{
  //根据Id删除学生信息
  ElMessageBox.confirm(
      '确认删除班名为:'+item.name+"的班级信息吗?",
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        deleteClass(item.name).then(res=>{
          if (res.code==0)
          {
            ElMessage.success("删除班级信息成功")
            getPlus()
          }
          else ElMessage.error(res.data)
        })
      })
      .catch(() => {

      })
}
const setClasses =(item)=>{
  detailAvailable.value=true
  changeAble.value=true
  addAble.value=false
  idAble.value=true
  addForm.groupId=item.groupId
  addForm.name=item.name
  addForm.grade=item.grade
}
const setConfirm =()=>{
  setClass(addForm).then((res)=>{
    if (res.code==0)
    {
      ElMessage.success("修改班级信息成功，对应学生信息相应修改")
      detailAvailable.value=false
      getPlus()
    }
    else ElMessage.error("修改失败，网络波动，请稍后修改")
  })
}
const searchClass =()=>{
  getPlus()
}


const sizeChange =(number)=>{
  pageForm.pageSize=number
  getPlus()
}
const pageChange =(number)=>{
  pageForm.pageNum=number
  getPlus()
}

onMounted(()=>{
/*   console.log(useUserStore().token)
 */  getClass({pageNum:1,pageSize:5}).then(res=>{
    useClassStore().setClasses(res.data.items)
    pageForm.total=res.data.total
  })
})
</script>

<template>
  <div class="information_top">
    <p >班级管理</p>
    <el-button type="primary" size="large" @click="addClasses">添加班级</el-button>
  </div>
  <div style="margin: 1.5vh 1.5vw;color: rgb(96,98,102)">
    <a>班号:</a>
    <el-input
        v-model="pageForm.groupId"
        placeholder="请输入班号"
        style="width:13%;margin-left: 2%"
    >
    </el-input>

    <a style="margin-left: 3%">班名:</a>
    <el-input
        v-model="pageForm.name"
        placeholder="请输入班名"
        style="width:13%;margin-left: 2%"
    >
    </el-input>
    <el-button type="primary" style="margin-left: 2%" @click="searchClass">查询</el-button>
    <el-button type="auto" @click="reset">重置</el-button>
  </div>
  <div class="title">
    <a style="flex: 1">年级</a>
    <a style="flex: 1">班号</a>
    <a style="flex: 1">班名</a>
    <a style="flex:1">操作</a>
  </div>
  <div style="height: 50vh;width: 100%;overflow-y: scroll;margin-bottom: 2vh">
    <div class="content" v-for="item in useClassStore().classes" v-bind:key="item.groupId">
      <a style="flex: 1;">{{item.grade}}</a>
      <a style="flex: 1;">{{item.groupId}}</a>
      <a style="flex: 1;">{{item.name}}</a>
      <span style="flex: 1;">
      <el-button style="width:2rem;height: 2rem;border-radius: 1rem" type="primary" plain  @click="searchDetail(item)"
      ><i class="iconfont">&#xe625;</i></el-button>
      <el-button style="width:2rem;height: 2rem;border-radius: 1rem" type="info" plain @click="setClasses(item)"
      ><i class="iconfont" >&#xe8cf;</i></el-button>
      <el-button style="width:2rem;height: 2rem;border-radius: 1rem" type="danger" plain  @click="removeClass(item)"
      ><i class="iconfont">&#xe8b6;</i></el-button>
    </span>
    </div>
  </div>
  <div style="float:right;;">
    <el-pagination
        v-model:current-page="pageForm.pageNum"
        v-model:page-size="pageForm.pageSize"
        :page-sizes="[5, 10]"
        :background="true"
        layout="jumper, total, sizes, prev, pager, next "
        :total="pageForm.total"
        @size-change="sizeChange"
        @current-change="pageChange"
    />
  </div>


  <!--  信息框架-->
  <el-dialog v-model="detailAvailable" title="班级信息" style="width:38vw">
    <el-form :inline="true" :model="addForm" class="demo-form-inline">
      <el-form-item label="年级" style="width: 15vw">
        <el-input v-model="addForm.grade" placeholder="年级" :disabled="!changeAble"/>
      </el-form-item>
      <el-form-item label="班号" style="width: 15vw">
        <el-input v-model="addForm.groupId" placeholder="班号"  :disabled="idAble"/>
      </el-form-item>
      <el-form-item label="班名" style="width: 32vw">
        <el-input v-model="addForm.name" placeholder="班名"  :disabled="!changeAble"/>
      </el-form-item>
      <div v-if="!changeAble">
        <div>
          班级成员
        </div>
        <div style="display: flex">
          <div style="width: 16vw;display: flex;border: 1px solid rgb(235,238,245)">
            <span style="flex: 1;text-align: center;background-color: rgb(245,247,250);">学号</span>
            <span style="flex: 1;text-align: center">姓名</span>
          </div>
          <div style="width: 16vw;display: flex;border: 1px solid rgb(235,238,245)">
            <span style="flex: 1;text-align: center;background-color: rgb(245,247,250);">学号</span>
            <span style="flex: 1;text-align: center">姓名</span>
          </div>
        </div>
        <div style="max-height: 20vh;overflow-y: auto;width: 34vw;display: flex;flex-wrap: wrap">
          <div style="width: 16vw;display: flex;border: 1px solid rgb(235,238,245)" v-for="item in useClassStore().students" v-bind:key="item.stuId">
            <span style="flex: 1;text-align: center;background-color: rgb(245,247,250);">{{item.stuId}}</span>
            <span style="flex: 1;text-align: center">{{item.name}}</span>
          </div>
        </div>
      </div>
    </el-form>
    <div v-if="changeAble&&addAble" style="display: flex;justify-content: space-evenly">
      <el-button type="primary" size="large" @click="addConfirm">添加</el-button>
      <el-button type="info" size="large" @click="detailAvailable=false">取消</el-button>
    </div>
    <div v-if="changeAble&&!addAble" style="display: flex;justify-content: space-evenly">
      <el-button type="primary" @click="setConfirm">修改</el-button>
      <el-button @click="detailAvailable=false">取消</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>
.information_top{
  margin-top: 1.5vh;
  padding-left: 1.5vw;
  padding-right: 1.5vw;
  padding-bottom: 1.5vh;
  font-size: 1.5rem;
  border-bottom:2px solid rgba(138,143,141,0.1);
  display: flex;
  justify-content: space-between;
}
.title{
  display: flex;
  justify-content:space-between ;
  margin-left: 1.5vw;
  margin-right: 1.5vw;
  margin-top: 2vh;
  font-size: 1.2rem;
  font-weight: bold;
  color: rgb(144,147,153);
  height: 8vh;
  line-height: 7vh;
  border-bottom: 2px solid rgba(138,143,141,0.2);
}
.content{
  margin-left: 1.5vw;
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
  height: 9vh;
  line-height: 9vh;
  border-bottom: 2px solid rgb(138,143,141,0.2);
}
.content:hover{
  background-color: rgb(245,247,250);
}
</style>